<template>
	<view class="content">
		<view class="header-info">
			<view class="info" @click="openInfo()">
				<cover-image :src="imgUrl" mode="aspectFit" class="img"></cover-image>
				<view class="person">
					<view class="name">
						<text>王小明</text>
						<text class="duty">i值班员</text>
					</view>
					<view class="unit">广州市应急管理局</view>
				</view>
				<view class="more">
					<uni-icons type="arrowright" size="16" color="#FFF"></uni-icons>
				</view>
			</view>
		</view>

		<view class="main">
			<view class="report">
				<view class="report-item" @click="report()">
					<cover-image :src="reportIcon" mode="aspectFit" class="img"></cover-image>
					<text>信息报送</text>
				</view>
				<view class="line"></view>
				<view class="report-item" @click="record()">
					<cover-image :src="recordIcon" mode="aspectFit" class="img"></cover-image>
					<text>报送记录</text>
				</view>
			</view>

			<view class="task">
				<view class="task-header">
					<text>我的任务</text>
					<view class="icon" @click="goTask()">
						<uni-icons type="arrowright" size="16"></uni-icons>
					</view>
				</view>
				<view class="task-list">
					<view class="task-item" v-for="(item,index) in taskList" :key="index" @click="goTask(item)">
						<uni-badge class="number">{{item.number}}</uni-badge>
						<cover-image :src="item.icon" mode="aspectFit" class="img"></cover-image>
						<text class="label">{{item.label}}</text>
					</view>
				</view>
			</view>

			<view class="event">
				<view class="event-header">
					<text>我的事件</text>
					<view class="icon" @click="goEvent()">
						<uni-icons type="arrowright" size="16"></uni-icons>
					</view>
				</view>
				<ScrollList :list="eventList" :total="total" @scrolltolower="scrollLoad">
					<view class="event-list">
						<view v-for="(item,index) in eventList" :key="item.id" class="event-item" @click="goEvent(item, 'detail')">
							<view class="event-info">
								<view class="title">{{item.title}}</view>
								<view class="type" :class="'rank'+item.rank">{{item.type}}</view>
								<view class="time">
									<text class="iconfont icon-shijian1"></text>
									{{item.time}}
								</view>
							</view>
							<view class="number" v-if="item.number>0">{{item.number}}</view>
						</view>
					</view>
				</ScrollList>
			</view>

		</view>
		<!-- <TabBar :current="2"></TabBar> -->
	</view>
</template>

<script>
	import ScrollList from '@/components/scrollList';
	export default {
		components: {
			ScrollList,
		},
		data() {
			return {
				total: 5,
				eventList: [{
						title: '0523 深圳市南山区XX村发生洪涝灾害深圳市南山区XX村发生洪涝灾害',
						type: '洪涝',
						time: '2021-12-12 12:20:12',
						number: 2,
						rank: 1,
						id: 10
					},
					{
						title: '0523 深圳市南山区XX村发生洪涝灾害深圳市南山区XX村发生洪涝灾害',
						type: '滑坡',
						time: '2021-12-12 12:20:12',
						number: 2,
						rank: 2,
						id: 11
					},
					{
						title: '0523 深圳市南山区XX村发生洪涝灾害',
						type: '泥石流',
						time: '2021-12-12 12:20:12',
						number: 2,
						rank: 3,
						id: 12
					},
					{
						title: '0523 深圳市南山区XX村发生洪涝灾害',
						type: '洪涝',
						time: '2021-12-12 12:20:12',
						number: 2,
						rank: 3,
						id: 13
					}, {
						title: '0523 深圳市南山区XX村发生洪涝灾害',
						type: '洪涝',
						time: '2021-12-12 12:20:12',
						number: 2,
						rank: 2,
						id: 14
					}, {
						title: '0523 深圳市南山区XX村发生洪涝灾害',
						type: '洪涝',
						time: '2021-12-12 12:20:12',
						number: 2,
						rank: 1,
						id: 15
					}
				],
				imgUrl: 'https://img2.baidu.com/it/u=1678948314,1083480950&fm=26&fmt=auto&gp=0.jpg',
				reportIcon: require('@/static/images/index/report.png'),
				recordIcon: require('@/static/images/index/record.png'),
				taskList: [{
						icon: require('@/static/images/index/await.png'),
						label: '待执行',
						number: 9
					},
					{
						icon: require('@/static/images/index/execute.png'),
						label: '执行中',
						number: 9
					},
					{
						icon: require('@/static/images/index/complete.png'),
						label: '已完成',
						number: 0
					}, {
						icon: require('@/static/images/index/cancel.png'),
						label: '已取消',
						number: 0
					}
				]
			}
		},
		onLoad() {

		},
		onShow() {},
		methods: {
			// scrollLoad() {
			// 	if (this.eventList.length < this.total) {
			// 		this.getList();
			// 	}
			// },
			// getList() {
			// 	this.eventList.push({})
			// },
			// 打开个人信息
			openInfo() {
				uni.navigateTo({
					url: '/pages/my/index',
				})
			},
			// 新建报送
			report() {
				uni.navigateTo({
					url: '/pages/report/index'
				})
			},
			record() {
				uni.navigateTo({
					url: '/pages/report/record'
				})
			},
			goEvent(row, type) {
				console.log(row)
				if (type == 'detail') {
					uni.navigateTo({
						url: '/pages/eventDetail/index?eventId=' + row.id
					})
				} else {
					uni.switchTab({
						url: '/pages/event/index'
					})
				}

			},
			goTask(state) {
				uni.switchTab({
					url: '/pages/task/index?status=' + state
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.content {
		position: relative;
		font-size: 32rpx;
	}

	//等级
	.rank1 {
		background: rgba(50, 148, 255, 0.2);
		border: 1px solid #027AFF;
		color: #027AFF;
	}

	.rank2 {
		background: rgba(252, 162, 80, 0.2);
		border: 1px solid #FFA451;
		color: #FFA451;
	}

	.rank3 {
		background: rgba(255, 183, 60, 0.2);
		border: 1px solid #FFCB52;
		color: #FFCB52;
	}

	// 头部个人信息
	.header-info {
		height: 240rpx;
		background-color: #027aff;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		position: relative;

		.info {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			margin-bottom: 50rpx;

			.img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}

			.person {
				width: calc(100% - 220rpx);
				line-height: 56rpx;

				.name {
					font-size: 36rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}

				.duty {
					background: rgba(255, 255, 255, .2);
					width: 126rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 24rpx;
					font-size: 20rpx;
					text-align: center;
					margin-left: 20rpx;
				}

				.unit {
					font-size: 28rpx;
					opacity: 0.8
				}
			}

			.more {
				width: 40rpx;
			}
		}
	}

	// 主要内容
	.main {
		padding: 0 32rpx;
		position: relative;
		top: -68rpx;
		left: 0;
		width: 100%;
		box-sizing: border-box;

		.event-header,
		.task-header {
			height: 88rpx;
			line-height: 88rpx;
			border-bottom: 1px solid #E4E7F0;
			padding: 0 32rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.icon {
			float: right;
			color: #707070;
			font-size: 22rpx;
		}

		// 信息报送
		.report {
			width: 100%;
			height: 136rpx;
			background: #FFFFFF;
			box-shadow: 0px 6rpx 16rpx rgba(2, 122, 255, 0.2);
			border-radius: 70rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			line-height: 48rpx;
			text-align: center;

			.report-item {
				width: 49%;
				text-align: center;
				display: flex;
				padding: 0 70rpx;
				font-size: 28rpx;

				.img {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}

			.line {
				width: 2rpx;
				height: 32rpx;
				background-color: rgba(44, 121, 247, .8);
			}
		}

		//任务内容
		.task {
			width: 100%;
			height: 296rpx;
			background: #FFFFFF;
			box-shadow: 0px 5px 15px rgba(2, 122, 255, 0.2);
			border-radius: 16px;
			margin-top: 24rpx;

			.task-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: rgba(34, 35, 40, .8);
				width: 100%;
			}

			.task-item {
				width: 25%;
				position: relative;
				display: flex;
				flex-wrap: wrap;
				padding: 40rpx;

				.number {
					position: absolute;
					right: 30rpx;
					top: 30rpx;
					min-width: 32rpx;
					height: 32rpx;
					padding: 0 8rpx;
					background: #FA4343;
					border-radius: 50%;
					opacity: 1;
					text-align: center;
					line-height: 32rpx;
					color: #FFFFFF;
				}

				.img {
					width: 80rpx;
					height: 80rpx;
					margin: 0 auto;
				}

				.label {
					width: 100%;
					text-align: center;
					margin-top: 14rpx;
					font-size: 24rpx;
				}
			}
		}

		//事件内容
		.event {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 5px 15px rgba(2, 122, 255, 0.2);
			border-radius: 16px;
			margin-top: 32rpx;

			.event-list {
				padding: 0 32rpx;
			}

			.event-item {
				border-bottom: 2rpx solid #E4E7F0;
				padding: 40rpx 0;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.event-info {
					width: 90%;

					.title {
						font-size: 30rpx;
						color: #2B2B2B;
					}

					.type {
						display: inline-block;
						height: 36rpx;
						border-radius: 16px;
						font-size: 22rpx;
						padding: 0 16rpx;
						line-height: 32rpx;
						margin-right: 24rpx;
					}

					.time {
						display: inline-block;
						font-size: 22rpx;
						color: #2B2B2B;
						opacity: 0.6;

						.iconfont {
							font-size: 24rpx;
							margin-right: 4rpx;
						}
					}
				}

				.number {
					width: 40rpx;
					height: 40rpx;
					background: linear-gradient(180deg, #FFCB52 0%, #FFA451 100%);
					opacity: 1;
					border-radius: 16rpx;
					color: #fff;
					line-height: 40rpx;
					text-align: center;
					font-size: 22rpx;
				}
			}
		}
	}
</style>
